<#-- 碰面分析 -->
<#include "../../common/_header.htm">
<div class="content-wrapper" style="margin-left: 0;padding: 0">
	<section class="content">
		<div class="row">
			<div class="bill-right">
				<form id="listForm">
					<div class="box">
						<div class="box-header">
							<div class="row RowSearchWork">
								<div class="col-sm-12">
									<div class="form-group">
				                        <div class="form-inline">
				                        	<div class="form-group form-z">
				                                <label class="control-label">时间范围</label>
				                                <input type="text" class="form-control form_datetime" id="startTime" placeholder="请输入开始日期" autocomplete="off"/>
				                            </div>
				                            <div class="form-group">
				                                <label class="control-label hidden-xs">至</label>
				                                <input type="text" class="form-control form_datetime" id="endTime" placeholder="请输入结束日期" autocomplete="off"/>
				                            </div>
				                            <div class="form-group ml10">
				                                <label class="control-label hidden-xs">浮动时间&gt;</label>
						                		<input type="number" class="form-control" name="floatTime" id="floatTime" value="5" placeholder="默认五分钟"/>
						                		<label class="control-label hidden-xs">分钟</label>
				                            </div>
				                            <div class="form-group ml10">
				                                <label class="control-label hidden-xs">涉案人员>=</label>
						                		<input type="number" class="form-control" name="meetPersonNum" id="meetPersonNum" value="${meetp.meetPersonNum!}"/>
				                            </div>
				                            <div class="form-group ml10">
												<input type="button" class="btn btn-primary" onclick="meet.analysis(0);" value="分析" />
												<input type="button" class="btn btn-default" onclick="meet.reset();" value="重置" />
												<input type="button" class="btn btn-primary daobtn" onclick="meet.exportList();" value="导出" />
											</div>
				                        </div>
			                        </div>
								</div>
							</div>
						</div>
						<div class="box-body">
	                        <div class="casemanage-switchtip">
								<div class="casemanage-zhexiantu active" onclick="meet.analysis(0)" title="切换为列表显示">
									<i class="casemanage-switchtip-list"></i><sapn>列表</sapn>
								</div>
								<div class="casemanage-map" onclick="mapDialog()"  title="切换为地图显示">
									<i class="casemanage-switchtip-map"></i><sapn>地图</sapn>
								</div>
								<input type="hidden" id="showType" value="0"/> 
							</div>
	                        <div id="_showTable">
								<table id="_table" class="table table-bordered table-striped table-hide">
									<thead>
									<tr>
										<th data-options="field:'code'">碰面日期</th>
										<th data-options="field:'name'">星期</th>
									</tr>
									</thead>
									<tbody>
									<tr><td colspan="2">暂无数据</td></tr>
									</tbody>
								</table>
	                        </div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</section>
</div>
<script type="text/javascript">
	var caseId=parent.caseId;
	$(document).ready(function(){
		 $(window).resize(function(){
			$('#_table').datagrid('resize',{
                height:($(window).height())-($('.box-header').outerHeight(true))-50,
			});
		});
		 meet.analysis();
	});
    function _checkedCallback(){
        meet.analysis();
    }
    function detailDialog(serviceNumber,meetTime) {
        let startTime = $.trim($("#startTime").val());
        let endTime = $.trim($("#endTime").val());
        var param = {
            startTime:startTime,
            endTime:endTime,
            checkedPhone :serviceNumber,
            meetTime:meetTime,
            caseId:caseId
        };
        if(parent.parent._checkedPhone.length>=1000){
            param.cardList="-1";//默认超过1000个节点为全选，不需要去后台传数据
        };
        var d = top.dialog({
            title : '活动轨迹分析详情',
            modal : true,
            url : '${ctx}/phoneAddress/trackdetailDialog',
            height : 800,
            width : 1500,
            data : param,
            onshow : function () {
            }
        });
        d.show();
        return false;
    }
    function mapDialog(lac,cid,latb,lngb,address) {
        var param = {
            latb:latb,
            lngb:lngb,
            cid:cid,
            lac:lac,
            address:address
        };
        if(parent.parent._checkedPhone.length>=1000){
            param.cardList="-1";//默认超过1000个节点为全选，不需要去后台传数据
        };
        var d = top.dialog({
            title : '碰面分析图',
            modal : true,
            url : '${ctx}/phoneAddress/phonemapDialog',
            height : 800,
            width : 1500,
            data : param,
            onshow : function () {

			}
        });
        d.show();
        return false;
    }
    //地图弹窗
    function showMap(){
        $("#hidebg-map").show();
        $("#hidebox-map").show();
        meet.analysis(1)
    }
    function hideMap(){
        $("#hidebg-map").hide();
        $("#hidebox-map").hide();
    }
	$(".form_datetime").datepicker({
	    format: "yyyy-mm-dd",
	    autoclose: true,
	    language:'zh-CN',
	    pickerPosition:"bottom-left"
	});
	var meet = {
		analysis : function(showType){
			$("#showType").val(showType);
			if(parent.parent._checkedPhone.length < 2){
				 toastr.error("请选择两个或两个以上手机号","提示信息");
                // $("#_table").html();
				 return false;
			}

			/**参数封装**/
			var data = {
				"showType" : showType, 
				"startTime" : $("#startTime").val(),
				"endTime" : $("#endTime").val(),
				"floatTime" : $("#floatTime").val(),
				caseId:caseId,
				"meetPersonNum" : $("#meetPersonNum").val(),
				"checkedPhone" : parent.parent._checkedPhone.join(',')
		    };
			$.ajax({
		        type:"POST",
		        url:"${ctx}/meet/meetAnalysis",
		        data: JSON.stringify(data),
		        dataType:"json",
		        contentType:"application/json",
		        success:function(result){
		        	if (result.result == "success") {
                        $("#_table").html("");
		        		if(result.data.showType == 0){
		        			var phones = result.data.phones;
							var result = result.data.mas;
							var arr = new Array();
							var collll = new Array();
                            collll.push({"field":"STARTING_TIME","align":"center", "title":"碰面日期"});
                            collll.push({"field":"week", "align":"center","title":"星期"});

                            $.each(phones,function(i,n) {
                                var str = {"field":n,"align":"center","title":n};
                                collll.push(str);
                            });
                            collll.push({"field":"xxx", "align":"center","title":"操作",formatter:function (value,row,index){
                                    return '<a onclick="detailDialog(\''+row.meetPhone+'\',\''+row.STARTING_TIME+'\')" style="cursor:pointer;" data-toggle="modal" data-target="#myModal">通话记录</a> &nbsp;&nbsp;' +
										'<a onclick="mapDialog(\''+row.lac+'\',\''+row.cid+'\',\''+row.latb+'\',\''+row.lngb+'\',\''+row.address+'\')" style="cursor:pointer;" data-toggle="modal" data-target="#myModal">位置</a>'
								}});
                            console.log(result);
                            $.each(result,function(ri,rval) {
                                var note ='{';
                                note  += '"STARTING_TIME":"'+this.meetDate+'",';
                                note  += '"week":"'+this.meetWeek+'",';
                                $.each(phones,function(pi,p) {
                                    var index = $.inArray(p, rval.meetPhone);
                                    if (index >= 0) {
                                        note  += '"'+p+'":"✔","lac":"'+rval.lac+'","cid":"'+rval.cid+'","latb":"'+rval.latb+'","lngb":"'+rval.lngb+'","address":"'+rval.address+'","meetPhone":"'+rval.meetPhone+'",';
                                    } else {
                                        note  += '"'+p+'":"-",';
                                    }
                                });
                                note = note.substring(0,note.length-1)+'}';
                                arr.push(note);
                            });
							var jsonStr = '{"total":'+arr.length+',"rows":['+arr.join(",")+']}';

                            var data = $.parseJSON(jsonStr);
                            // $("#_table").append(html);
							console.log(data);
							//重新加载表格
                            $('#_table').datagrid({
                                fitColumns:true,
                                singleSelect: true,
                                // fit: true,
                                singleSelect: true,
                                columns: [collll],
                                //onClickRow: onClickRow, //单击事件
                            }).datagrid('loadData',data);

                            // $("#_table").datagrid('loadData',data);
		        		}else{
		        			/*if (result.data.map){
			                 	initMap("hidebox-mContent",result.data.map);
				        	}*/
		        		}
					}
		        	
		        },
				error:function(err){
					toastr.error("数据加载失败","提示信息");
				}
		    });
		},
		reset : function(){
			$("#startTime").val('');
			$("#endTime").val('');
			$("#floatTime").val('');
			$("#meetPersonNum").val(2);
		},
		exportList : function(){
			 let floatTime = $.trim($("#floatTime").val());
	    	 let starTime = $.trim($("#startTime").val());
	    	 let endTime = $.trim($("#endTime").val());
	    	 let meetPersonNum = $.trim($("#meetPersonNum").val());
			 window.location.href="${ctx}/meet/exportMeetAnalysis?starTime="+starTime
					 +"&endTime="+endTime
					 +"&floatTime="+floatTime
					 +"&meetPersonNum="+meetPersonNum
					 +"&checkedPhone="+parent.parent._checkedPhone.join(',')+"&caseId="+caseId;
		}
	};
</script>
<style>
	body{
		padding-top: 0;
	}
	.content{
		padding-top: 0;

	}
	input#startTime{
		width: 120px;
		height: 30px;
		border-radius: 0;
	}
	input#endTime{
		width: 120px!important;
		height: 30px;
		border-radius: 0;
	}
	input#floatTime{
		width: 120px;
		height: 30px;
		border-radius: 0;
	}
	input#meetPersonNum{
		width: 120px;
		height: 30px;
		border-radius: 0;
	}
	span#scan{
		top: 5px;
	}
	input.btn.btn-primary{
		width: 70px;
		height: 30px;
		line-height: 12px;
	}
	input.btn.btn-default{
		width: 70px;
		height: 30px;
		line-height: 12px;
	}
	input.btn.btn-primary.daobtn{
		background-color: #23B7E5;
		border-color: #23B7E5;
	}
	.casemanage-switchtip div:hover{
		border-radius: 0 4px 4px 0;
	}
	#hidebg-map {
		position:absolute;
		left:0px;
		top:0px;
		background-color:#000;
		width: 100%;
		height: 100%;
		filter:alpha(opacity=60);  /*设置透明度为60%*/
		opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
		display:none;
		z-Index:999;
	}
	#hidebox-map {
		text-align: right;
		position:absolute;
		width: 96%;
		height: 82%;
		top: 23px;
		left: 2%;
		border-radius: 5px;
		background-color:#fff;
		display:none;
		z-Index:9999;
		padding: 10px;
	}
	div#hidebox-mContent {
		width: 100%;
		height: 96%;
	}
	.outAccount_d3_head {
		float: left;
		font-size: 20px;
		margin-bottom: 5px;
	}
	#hidebox-map span{
		font-size: 20px;
	}
	svg {
		height: 96%;
		width: 100%;
	}
	.form-group.form-z {
		margin-right: 0px !important;
	}
	.box-header .form-group{
		margin-right: 15px;
	}
	label.control-label.hidden-xs.form_z {
		margin-right: 6px;
		margin-left: -6px;
	}
	.control-label{
		font-size: 13px;
		font-weight: 400;
	}
	.bill-buttonarea .btn{
		margin-right: 12px;
		width: 70px;
	}
	.btn-primary:active:focus{
		background-color: #4695ed;
		border-color: #4695ed;
	}
	.box-body .title{
		font-size:14px;
		font-weight:800;
		line-height:30px;
	}
	.box-body .casemanage-switch{
		margin:0;
	}
	.btn-primary{
		background-color:#4695ed;
		border-color:#4695ed;
	}
	.btn-primary:hover, .btn-primary:active, .btn-primary.hover{
		background-color:#61a8f5;
		border-color:#61a8f5;
	}
	.btn-primary.focus, .btn-primary:focus{
		background-color:#4695ed;
		border-color:#4695ed;
	}
	.casemanage-switch .casemanage-list.active {
		background-color: #4695ed;
	}
	.casemanage-switch .casemanage-list{
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}
	.form-control{
		border-radius:4px;
		font-size: 12px;
		border-color: #e4e4e4;
	}
	.input-group .form-control:first-child{
		border-top-right-radius:4px;
		border-bottom-right-radius: 4px;
	}
	.form-control:focus{
		border-color:#4695ed;
	}
	.form-control:hover{
		border-color:#4695ed;
	}
	.box{
		padding: 0;
		 background: #fff;
	}
	.content {
		padding: 0px 0 5px 31px;
	}
	.box-header {
		padding-top: 5px;
	}
</style>